﻿<template>
  <div>
    <!-- 表格 -->
    <template v-if = "element && element.key && element.type == 'table'">
      <div class = 'page_tableContent dynamic_single ' style = 'margin-bottom:20px;'
      :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}"
        :height = 'element.options.height' :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem, tableIndex) in getTableColumns'
          :key = 'tableIndex' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)"
          v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- echarts图标-折线图 -->
    <template v-else-if = "element && element.key && element.type == 'echarts_line'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}"
      @click.stop = "handleSelectWidget(index)">
        <div class = 'bi_echartContent' :style = "{height: element.options.height + 'px'}">
          <MainEcharts :ref = 'element.model' :id = 'element.model' :className = "element.model + '_class'" :option = 'element.dataOptions'></MainEcharts>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)"
          v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- echarts图标-柱状图 -->
    <template v-else-if = "element && element.key && element.type == 'echarts_bar'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}"
      @click.stop = "handleSelectWidget(index)">
        <div class = 'bi_echartContent' :style = "{height: element.options.height + 'px'}">
          <MainEcharts :ref = 'element.model' :id = 'element.model' :className = "element.model + '_class'" :option = 'element.dataOptions'></MainEcharts>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)"
          v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- echarts图标-饼图 -->
    <template v-else-if = "element && element.key && element.type == 'echarts_pie'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}"
      @click.stop = "handleSelectWidget(index)">
        <div class = 'bi_echartContent' :style = "{height: element.options.height + 'px'}">
          <MainEcharts :ref = 'element.model' :id = 'element.model' :className = "element.model + '_class'" :option = 'element.dataOptions'></MainEcharts>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)"
          v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script src = './biItem.js'></script>
